<template>
	<view class="popup-container" v-if="visible" :style="{ top: safeAreaTop + 'px' }">
		<view class="popup-content" :class="{ 'popup-show': visible }" @click="handleClick">
			<view class="popup-icon">🔔</view>
			<view class="popup-text">
				<text class="popup-title">{{ title }}</text>
				<text class="popup-tip">{{ tip }}</text>
			</view>
			<view class="popup-close" @click.stop="closePopup">×</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PopUp',
		data() {
			return {
				visible: false,
				title: '',
				tip: '',
				url: '',
				timeout: 5000,
				timer: null,
				safeAreaTop: 0
			}
		},
		mounted() {
			// 获取安全区域高度
			this.getSafeAreaTop();
		},
		methods: {
			// 获取安全区域顶部高度
			getSafeAreaTop() {
				// #ifdef MP-WEIXIN
				const systemInfo = uni.getSystemInfoSync();
				this.safeAreaTop = systemInfo.statusBarHeight || 0;
				// #endif
				
				// #ifdef H5
				this.safeAreaTop = 0;
				// #endif
				
				// #ifdef APP-PLUS
				const systemInfo = uni.getSystemInfoSync();
				this.safeAreaTop = systemInfo.statusBarHeight || 0;
				// #endif
			},
			
			// 显示弹窗
			show(options = {}) {
				// 清除之前的定时器
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
				
				// 设置参数
				this.title = options.title || '消息提醒';
				this.tip = options.tip || '';
				this.url = options.url || '';
				this.timeout = options.timeout || 5000;
				
				// 显示弹窗
				this.visible = true;
				
				// 设置自动关闭
				if (this.timeout > 0) {
					this.timer = setTimeout(() => {
						this.closePopup();
					}, this.timeout);
				}
			},
			
			// 关闭弹窗
			closePopup() {
				this.visible = false;
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
			
			// 处理点击事件
			handleClick() {
				if (this.url) {
					// 跳转到指定页面
					uni.navigateTo({
						url: this.url,
						fail: (err) => {
							console.error('页面跳转失败:', err);
							// 如果跳转失败，尝试switchTab
							uni.switchTab({
								url: this.url,
								fail: () => {
									uni.showToast({
										title: '页面跳转失败',
										icon: 'none'
									});
								}
							});
						}
					});
				}
				
				// 关闭弹窗
				this.closePopup();
			}
		}
	}
</script>

<style scoped>
.popup-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	pointer-events: none;
}

.popup-content {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.3);
	transform: translateY(-100%);
	transition: transform 0.3s ease;
	pointer-events: auto;
}

.popup-content.popup-show {
	transform: translateY(0);
}

.popup-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.popup-text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 8rpx;
	line-height: 1.2;
}

.popup-tip {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.3;
}

.popup-close {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: bold;
	margin-left: 20rpx;
	flex-shrink: 0;
}

.popup-close:active {
	color: #ffffff;
	transform: scale(0.9);
}

/* 动画效果 */
@keyframes slideIn {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideOut {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}
</style>
